<template>
    <div>
        <div id="market-app">
            <div class="content page-order" style="padding-bottom:2.5rem;overflow-x: hidden;">
                <div class="orderQueue">
                    <div class="top_header">
                        <img src="/static//app//images/arrow_left.png" onclick="history.go(-1)" style="margin-left: 0.5rem; float: left; width: 16px; height: 26px" alt="">
                        <h3 style="text-align: center">历史记录</h3>
                    </div>
                    <div class="orderTitle">
                        <span class="button f-fr" :class="{no_active:is_not_select_all}" @click=select_all()>显示所有币种</span>
                    </div>
                    <div v-if="history_list.length==0" class="noData">
                        <img src="/static/app/images/noData.png" />
                        <p>暂无历史记录</p>
                    </div>
                    <div style="margin-top: 1rem" v-else class="order" v-for="(item, index) in history_list" :key="index">
                        <div>
                            <span class="symbol">{{item.up_coin_type}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span :class="{is_send: item.is_send, is_withdrawal: item.is_withdrawal, is_deposit: item.is_deposit }">{{item.type}}</span>
                            </span>
                            <div v-if="item.show_detail" class="f-fr" style="margin-right: 0.8rem">
                                <span class="button f-fr" @click="show_detail(item.type, item.uuid)">详情</span>
                            </div>
                            <div class="time gray">时间 : {{item.create_time}}</div>
                            <div class="amount gray">数量 : {{item.amount}}</div>
                            <div class="status gray">状态 : {{item.status}}</div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script id="show_dep_detail" type="text/html">
            <div class="limitPrompt">
                <div class="limitdiv" style="padding-top: 0.3rem">
                    <i class="font font-close close-popup" onclick="layer.closeAll()"></i>
                    <div class="limitBox-desc">
                        <p>• 申请时间：<br/>
                            <span style="font-size: 10px" id="dep_his_tim">2018-04-02 16:19:07</span>
                        </p>
                        <p style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">• 充值地址：<br/>
                            <span style="font-size: 10px" id="dep_his_add">0x03e3cdae9ec271ffa9980b1d1ad22cbb7b1a5d2b</span>
                        </p>
                        <p style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">• 区块链交易id：<br/>
                            <a style="font-size: 10px" id="dep_his_id">0xca160a8e2ce128055e15bbfabc8075f5ab7be7bc07ae5fd82f1981aaeb14c591</a>
                        </p>
                    </div>
                </div>
            </div>
        </script>
        <script id="show_wit_detail" type="text/html">
            <div class="limitPrompt">
                <div class="limitdiv" style="padding-top: 0.3rem">
                    <i class="font font-close close-popup" onclick="layer.closeAll()"></i>
                    <div class="limitBox-desc">
                        <p>• 申请时间：<br/>
                            <span style="font-size: 10px" id="wit_his_tim">2018-04-02 16:19:07</span>
                        </p>
                        <p>• 手续费：<br/>
                            <span style="font-size: 10px" id="wit_his_fee">21</span>
                        </p>
                        <p style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">• 提现地址：<br/>
                            <span style="font-size: 10px" id="wit_his_add">0x03e3cdae9ec271ffa9980b1d1ad22cbb7b1a5d2b</span>
                        </p>
                        <p style="margin-top: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">• 区块链交易id：<br/>
                            <a style="font-size: 10px" id="wit_his_id">0xca160a8e2ce128055e15bbfabc8075f5ab7be7bc07ae5fd82f1981aaeb14c591</a>
                        </p>
                    </div>
                </div>
            </div>
        </script>
    </div>
</template>

<script>
export default {
  data() {
    return {
      CoinDetail: {},
      coin_type: "",
      is_not_select_all: true,
      coin_type: "",
      up_coin_type: "",
      history_list: [],
      jsonobj: [],
      dep_his_detail: {},
      wit_his_detail: {}
    };
  },
  methods: {
    /* 转换选择全部或者部分 */
    select_all: function() {
      if (this.is_not_select_all) {
        this.is_not_select_all = false;
      } else {
        this.is_not_select_all = true;
      }
      this.show_history();
    },
    show_history: function() {
      var jsonobj = this.jsonobj;
      var history_list = [];
      for (var i = 0; i < jsonobj.length; i++) {
        var info = jsonobj[i];
        if (this.is_not_select_all) {
          if (this.coin_type != info.coin_type) {
            continue;
          }
        }
        //console.log(info.coin_type)
        var row = {};
        row.uuid = info.uuid;
        row.coin_type = info.coin_type;
        row.up_coin_type = row.coin_type.toUpperCase();

        row.price = info.price;
        /* 数量 */
        row.amount = info.amount;
        /* 时间 */
        row.create_time = date_format_iso(info.create_time);
        row.show_detail = false;

        /* 状态 */
        if (info.status === 2) {
          row.status = "成功";
          if (info.type == 22 || info.type == 21) {
            row.show_detail = true;
          }
        } else if (info.status === 1) {
          row.status = "申请中";
        }
        /* 类型 */
        if (info.type === 22) {
          row.is_withdrawal = true;
          row.is_deposit = false;
          row.is_send = false;
          row.type = "提现";
        } else if (info.type === 21) {
          row.is_withdrawal = false;
          row.is_deposit = true;
          row.is_send = false;
          row.type = "充值";
        } else if (info.type === 26) {
          row.is_withdrawal = false;
          row.is_deposit = false;
          row.is_send = true;
          row.type = "系统送币";
        }
        history_list.push(row);
      }
      this.history_list = history_list;
    },
    /* 请求历史记录 */
    get_history_list_all: function() {
        var params = {}
      params = { coin_type: this.coin_type };
      if (!this.is_not_select_all) {
        params = {};
      }
      // console.log(params)
      $.post("/btc/userinfo_get_finance", params, data => {
        //console.log(data);
        var jsonobj = data;
        this.jsonobj = jsonobj;
        this.show_history();
        // console.log(this.history_list);
      });
    },

    /* 根据ID获取详情的数据 */
    show_detail: function(type, uuid) {
      /* 充值的情况 */
      if (type === "充值") {
        $.post(
          "/btc/get_deposites",
          {
            uuid: uuid
          },
          res => {
            // console.log(res);
            this.dep_his_detail = res;
            layer.open({
              className: "PromptBox",
              type: 1,
              content: $("#show_dep_detail").html(),
              anim: "up",
              style:
                "background:none; left:0; top:0; width:100%; height:100%;  -webkit-animation-duration: .5s; animation-duration: .5s;"
            });
            $("#dep_his_tim").html(
              date_format_iso(this.dep_his_detail.confirm_time)
            );
            $("#dep_his_add").html(this.dep_his_detail.address);
            $("#dep_his_id")
              .html(this.dep_his_detail.txid)
              .attr(
                "href",
                "https://etherscan.io/tx/" + this.dep_his_detail.txid
              );
          }
        );
      }
      if (type === "提现") {
        /* 提现的情况 */
        $.post(
          "/btc/get_withdrawes",
          {
            uuid: uuid
          },
          res => {
            // console.log(res);
            this.wit_his_detail = res;
            layer.open({
              className: "PromptBox",
              type: 1,
              content: $("#show_wit_detail").html(),
              anim: "up",
              style:
                "background:none; left:0; top:0; width:100%; height:100%;  -webkit-animation-duration: .5s; animation-duration: .5s;"
            });
            $("#wit_his_tim").html(
              date_format_iso(this.wit_his_detail.withdraw_time)
            );
            $("#wit_his_fee").html(this.wit_his_detail.fee);
            $("#wit_his_add").html(this.wit_his_detail.address);
            $("#wit_his_id")
              .html(this.wit_his_detail.txid)
              .attr(
                "href",
                "https://etherscan.io/tx/" + this.dep_his_detail.txid
              );
          }
        );
      }
    }
  },
  created() {
    /* 根据URL地址获取参数 */
    this.coin_type = this.$route.params.coin_type;
    this.get_history_list_all();
  },
  components: {}
};
</script>

<style>

</style>
